<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="javax.servlet.http.HttpServlet"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%@ page import="javax.servlet.http.HttpServletResponse"%>
<%@ page import="javax.servlet.http.HttpSession"%>
<%@ page import="java.util.Date" %>
<%@ page import="battleship.User" %>

<!DOCTYPE html>

<html>
<head>
    <title>Laevade pommitamine</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script type="text/javascript" src="drag_drop.js"></script>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="buffer.js"></script>
    <script type="text/javascript" src="local.js"></script>
    <script type="text/javascript" src="login.js"></script>
    <script type="text/javascript" src="lobby.js"></script>

    <%
        String status = (String) session.getAttribute("status");
        out.println("<link id='viewCSS' rel='stylesheet' type='text/css' href='" + status + ".css' />");

    %>
</head>

<body>
<div id="content">
<div id="title_area">
    <h1 id="title_header">Laevade pommitamine</h1>
</div>
<div id="center_area">

<div id="login">
    <div class="enterUsername">
        <h3>Tere tulemast laevade pommitamise mängu!</h3>
        <form id="formUsername" action="sendUsername">
            <h4>Sisesta oma kasutajanimi:</h4>
            <input id="usernameField" type="text" name="username" />
            <br /><br />
            <input type="submit" value="Sisene" class="button submitUsername" />
        </form>
    </div>
</div>

<div id="lobby">
    <div class="lobbyTitle">
        <h3 id="lobbyTitleText">Tere, <%=((User) session.getAttribute("user")).getUsername()%>!</h3>
    </div>
    <div id="newGameStarted">
        <div class="newGameStartedText">
            <p id="youStartedANewGame">Avasid ise uue mängu. Oota, kuni keegi liitub.</p>
        </div>
        <div id="cancelNewGameDiv">
            <button id="cancelNewGameButton" class="button cancelNewGame">katkesta</button>
        </div>
    </div>
    <div id="lobbyButtons">
        <button id="logOutButton" class="button lobbyButton">Logi välja</button>
        <button id="gameHistoryButton" class="button lobbyButton">Mängude ajalugu</button>
        <button id="scoresButton" class="button lobbyButton">Edetabel</button>
        <button id="newGameButton" class="button lobbyButton">Ava uus mäng</button>
    </div>
    <div class="openGamesTitle">
        <p>Hetkel avatud mängud:</p>
    </div>
    <div class="currentGamesTitle">
        <p>Hetkel käimasolevad mängud:</p>
    </div>
    <div class="openGames">
        <div class="openGamesInner">
            <form id="chooseOpponent" action="">
                <input type="radio" name="opponent" value="opp1" class="opponentRadio"><span>  opp1-text</span></input><br />
                <input type="radio" name="opponent" value="opp2" class="opponentRadio"><span>  opp2-text</span></input><br />
            </form>
        </div>
    </div>
    <div class="currentGames">
        <div class="currentGamesInner">
            <div id="currentGamesPairs">

            </div>
        </div>
    </div>
    <div id="lobbyLowerArea">
        <button id="joinGameBtn" class="button joinGameButton">Alusta</button>
    </div>
</div>

<div id="game">


<div id="left">
    <div class="side_board">
        <table id="side_board">
            <tr>
                <td class="sb_corner"></td>
                <td class="sb_topbottomedge">A</td>
                <td class="sb_topbottomedge">B</td>
                <td class="sb_topbottomedge">C</td>
                <td class="sb_topbottomedge">D</td>
                <td class="sb_topbottomedge">E</td>
                <td class="sb_topbottomedge">F</td>
                <td class="sb_topbottomedge">G</td>
                <td class="sb_topbottomedge">H</td>
                <td class="sb_topbottomedge">I</td>
                <td class="sb_topbottomedge">J</td>
                <td class="sb_corner"></td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">1</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">1</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">2</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">2</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">3</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">3</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">4</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">4</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">5</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">5</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">6</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">6</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">7</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">7</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">8</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">8</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">9</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">9</td>
            </tr>
            <tr>
                <td class="sb_leftrightedge">10</td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_square"></td>
                <td class="sb_leftrightedge">10</td>
            </tr>
            <tr>
                <td class="sb_corner"></td>
                <td class="sb_topbottomedge">A</td>
                <td class="sb_topbottomedge">B</td>
                <td class="sb_topbottomedge">C</td>
                <td class="sb_topbottomedge">D</td>
                <td class="sb_topbottomedge">E</td>
                <td class="sb_topbottomedge">F</td>
                <td class="sb_topbottomedge">G</td>
                <td class="sb_topbottomedge">H</td>
                <td class="sb_topbottomedge">I</td>
                <td class="sb_topbottomedge">J</td>
                <td class="sb_corner"></td>
            </tr>
        </table>
    </div>
    <div id="ships" >
        <img id="0_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="1_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="2_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="3_" class="ship" src="images/1.png" width="32" height="25" alt="1-ruudu laev" title="1-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="4_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="5_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="6_" class="ship" src="images/2.png" width="60" height="25" alt="2-ruudu laev" title="2-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="7_" class="ship" src="images/3.png" width="100" height="25" alt="3-ruudu laev" title="3-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="8_" class="ship" src="images/3.png" width="100" height="25" alt="3-ruudu laev" title="3-ruudu laev" draggable="true" ondragstart="drag(event)" />
        <img id="9_" class="ship" src="images/4.png" width="130" height="25" alt="4-ruudu laev" title="4-ruudu laev" draggable="true" ondragstart="drag(event)"/>
    </div>
</div>
<div id="center">
    <div id="tableDiv">
        <table id="main_board" ondrop="drop(event)" ondragover="allowDrop(event)">
            <tr>
                <td class="corner"></td>
                <td class="topbottomedge">A</td>
                <td class="topbottomedge">B</td>
                <td class="topbottomedge">C</td>
                <td class="topbottomedge">D</td>
                <td class="topbottomedge">E</td>
                <td class="topbottomedge">F</td>
                <td class="topbottomedge">G</td>
                <td class="topbottomedge">H</td>
                <td class="topbottomedge">I</td>
                <td class="topbottomedge">J</td>
                <td class="corner"></td>
            </tr>
            <tr>
                <td class="leftrightedge">1</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">1</td>
            </tr>
            <tr>
                <td class="leftrightedge">2</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">2</td>
            </tr>
            <tr>
                <td class="leftrightedge">3</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">3</td>
            </tr>
            <tr>
                <td class="leftrightedge">4</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">4</td>
            </tr>
            <tr>
                <td class="leftrightedge">5</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">5</td>
            </tr>
            <tr>
                <td class="leftrightedge">6</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">6</td>
            </tr>
            <tr>
                <td class="leftrightedge">7</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">7</td>
            </tr>
            <tr>
                <td class="leftrightedge">8</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">8</td>
            </tr>
            <tr>
                <td class="leftrightedge">9</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">9</td>
            </tr>
            <tr>
                <td class="leftrightedge">10</td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="square"></td>
                <td class="leftrightedge">10</td>
            </tr>
            <tr>
                <td class="corner"></td>
                <td class="topbottomedge">A</td>
                <td class="topbottomedge">B</td>
                <td class="topbottomedge">C</td>
                <td class="topbottomedge">D</td>
                <td class="topbottomedge">E</td>
                <td class="topbottomedge">F</td>
                <td class="topbottomedge">G</td>
                <td class="topbottomedge">H</td>
                <td class="topbottomedge">I</td>
                <td class="topbottomedge">J</td>
                <td class="corner"></td>
            </tr>
        </table>
    </div>
    <div class="ready_button">
        <a id="valmis" class="ready" href="#" title="Valmis">Valmis</a>
    </div>
</div>
<div id="right">
    <ul class="menu">
        <li><a class="item" href="#">Uus mäng</a></li>
        <li><a class="item" href="#">Anna alla</a></li>
        <li><a class="item" href="#">Edetabel</a></li>
        <li><a class="item" href="#">Senised käigud</a></li>
        <li><a class="item" href="#">Esita senine mäng</a></li>
        <li><a class="item" href="#">Vanemad mängud</a></li>
    </ul>
</div>
</div>
<div id="highScores">
    <div id="scoresTitle">
        <h1>Edetabel</h1>
    </div>
    <div id="scoresBackButtonDiv">
        <button id="scoresBackButton" class="button">Tagasi</button>
    </div>
    <div id="scoresTableDivOuter">
        <div id="scoresTableDiv">
            <table id="scoresTable">
                <tr>
                    <th>Mängija</th>
                    <th>Võite</th>
                    <th>Kaotusi</th>
                    <th>Võiduprotsent</th>
                </tr>
                <tr>
                    <td>Peeter</td>
                    <td>5</td>
                    <td>5</td>
                    <td>50%</td>
                </tr>
                <tr>
                    <td>Peeter</td>
                    <td>5</td>
                    <td>5</td>
                    <td>50%</td>
                </tr>
            </table>
        </div>
    </div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>